<template>
  <div class="news">
    <h4>我是新闻页面</h4>
    <div class="news_con">
      <!-- 定义子路由插入的位置 -->
      <div>
        <nuxt-link to="/news/hot"><span>热点新闻</span></nuxt-link>
        <nuxt-link to="/news/recreation"><span>娱乐新闻</span></nuxt-link>
      </div>
      <div>
        <NuxtChild />
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.news {

  h4 {
    text-align: center;
  }

  .news_con {
    display: flex;
    padding-top: 100px;

    &>div {

      &:first-child {
        width: 100px;
        border-right: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex-shrink: 0;

        span {
          display: block;
          padding: 10px 6px;
        }
      }

      &:last-child {

      }
    }
  }
}
</style>
